<template>
  <div>
    <el-dialog
      title="医废标签"
      width="460px"
      :visible.sync="dialog"
      modal-append-to-body
      @close="close"
      append-to-body
    >
      <div class="label-content" id="printLabel">
        <div class="headline">
          {{dataForm.hospitalBaseName}}
          <div class="type">
            <img
              src="../../../../assets/5.png"
              alt=""
            >
          </div>
        </div>
        <div class="label-info s-d-flex s-ai-stretch pt20 pb15">
          <div
            id="qrcode"
            class="code qrcode"
            ref="qrCodeUrl"
          ></div>
          <div class="info s-d-flex s-ai-column s-ai-stretch s-jc-space-between pl15">
            <div class="item eps-1">编号:{{dataForm.code}}</div>
            <div class="item"> 来源:{{dataForm.hospitalDepartName}}</div>
            <div class="item">类型:{{dataForm.wasteClassifyName}}</div>
            <div class="item">重量:{{dataForm.weight ? dataForm.weight : 0}}kg</div>
          </div>
        </div>
        <div class="foot s-d-flex s-jc-space-between pt15 mt15">
          <div>移交人:{{dataForm.handUserStaffName}}</div>
          <div>时间:{{dataForm.createTime}}</div>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          :loading="loading"
          v-print="'#printLabel'"
          size="small"
        ><i class="el-icon-circle-check ml0 mr10 el-icon--right"></i> {{ loading ? '提交中 ...' : '打印标签' }}</el-button>
        <el-button
          size="small"
          @click="close"
        ><i class="el-icon-circle-close ml0 mr10 el-icon--right"></i> 取 消</el-button>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      dialog: false,
      qrcode: null,
      dataForm: {},
      loading: false,
    };
  },
  methods: {
    //关闭弹框
    close() {
      this.qrcode.clear();
      this.dialog = false;
      document.getElementById("qrcode").innerHTML = "";
    },
    //生产二维码
    creatQrCode(content) {
      this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: content, // 需要转换为二维码的内容
        width: 85,
        height: 85,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    showModal(_row) {
      this.dialog = true;
      this.$nextTick(() => {
        this.creatQrCode(_row.content);
        this.dataForm = _row;
      });
    },
    handleSave() {},
  },
};
</script>
<style lang="scss" scoped>
.label-content {
  background: #ffe700;
  border-radius: 6px;
  width: 420px;
  height: 244px;
  padding: 20px;
  color: #11091a;
  .headline {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    position: relative;
    .type {
      position: absolute;
      right: 0;
      top: -8px;
      img {
        width: 32px;
      }
    }
  }
}
.qrcode {
  display: inline-block;
  width: 96px;
  height: 96px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
}
.item {
  font-size: 15px;
  color: #11091a;
}
.foot {
  border-top: 1px solid #11091a;
  font-size: 15px;
  color: #11091a;
}
::v-deep .el-dialog__header {
  padding: 18px 20px;
}
::v-deep .el-dialog__headerbtn {
  top: 18px;
}
::v-deep .el-dialog__header {
  background: #f0f1f5;
}
::v-deep .el-dialog__footer {
  padding: 24px;
  text-align: center;
  border-top: 1px solid #d7d9db;
}
</style>